import React, { useState }  from 'react'
import { ClearOutlined } from '@ant-design/icons';
import "./css/deliveryexception.css"
export default function DeliveryException() {
    // 搜索对象值
  const [search,setsearch] = useState({
    // 订单编号
    orderid:'',
    // 商品名称
    goodsname:'',
    // 店铺名称
    shopname:'',
    // 买家昵称
    buyname:'',
    // 收货人
    receivename:'',
    // 配送员
    deliveryname:'',
    // 手机号码
    phonenumber:'',
    // 创建时间
    createtime:'0',
    // 订单状态
    orderstatus:'0'
  })


  return (
    <div className='deliveryexception'>
          <div className="select_div">
            <div className="search_item">
              <div className='biao'>订单编号:</div><input type="text" 
              placeholder='请输入订单号' 
              value={search.orderid} 
              onChange={(e)=>{
                setsearch({
                  ...search,
                  orderid:e.target.value
                })
              }}
              />
            </div>
            <div className="search_item">
              <div className='biao'>商品名称:</div><input type="text" 
              placeholder='请输入商品名称'
              value={search.goodsname} 
              onChange={(e)=>{
                setsearch({
                  ...search,
                  goodsname:e.target.value
                })
              }}
               />
            </div>
            <div className="search_item">
              <div className='biao'>店铺名称:</div><input type="text"
               placeholder='请输入店铺名称'
               value={search.shopname} 
               onChange={(e)=>{
                setsearch({
                  ...search,
                  shopname:e.target.value
                })
              }}
                />
            </div>
            <div className="search_item">
              <div className='biao'>买家昵称:</div><input type="text" 
              placeholder='请输入买家昵称'
              value={search.buyname} 
              onChange={(e)=>{
                setsearch({
                  ...search,
                  buyname:e.target.value
                })
              }}
               />
            </div>
            <div className="search_item">
            <div className='biao'>收货人:</div>
              <input type="text"
               placeholder='请输入收货人姓名' 
               value={search.receivename} 
               onChange={(e)=>{
                setsearch({
                  ...search,
                  receivename:e.target.value
                })
              }}
               />
            </div>
            <div className="search_item">
            <div className='biao'>配送员:</div>
              <input type="text" 
              placeholder='请输入配送员姓名' 
              value={search.deliveryname} 
              onChange={(e)=>{
                setsearch({
                  ...search,
                  deliveryname:e.target.value
                })
              }}
              />
            </div>
            <div className="search_item">
            <div className='biao'>手机号码:</div>
              <input type="text" 
              placeholder='请输入任意人手机号'
              value={search.phonenumber} 
              onChange={(e)=>{
                setsearch({
                  ...search,
                  phonenumber:e.target.value
                })
              }}
               />
            </div>
            <div className="search_item">
            <div className='biao'>创建时间:</div>
              <select 
              value={search.createtime}
              onChange={(e)=>{
                setsearch({
                  ...search,
                  createtime:e.target.value
                })
              }}
              >
                <option value="0">全部</option>
                <option value="1">本月内</option>
                <option value="2">近三个月</option>
                <option value="3">今年内</option>
                <option value="4">2021年</option>
                <option value="5">2020年</option>
                <option value="6">2020年以前</option>
              </select>
            </div>
            <div className="search_item">
              <div className='biao'>订单状态:</div>
              <select
               value={search.orderstatus}
               onChange={(e)=>{
                setsearch({
                  ...search,
                  orderstatus:e.target.value
                })
              }}
               >
               
                <option value="0">全部异常状态</option>
                <option value="5">未到店预警</option>
                <option value="4">未离店预警</option>
                <option value="3">未送达预警</option>
                <option value="2">超时未到店</option>
                <option value="1">超时未送达</option>
                <option value="7">待商家退款</option>
                <option value="6">商家拒绝退款</option>
              </select>
            </div>
            <div className="search_item2">
                <button onClick={()=>{
                  console.log(search);
                }}>搜索</button>
                <span onClick={()=>{
                  setsearch({
                    orderid:'',
                    goodsname:'',
                    shopname:'',
                    buyname:'',
                    receivename:'',
                    deliveryname:'',
                    phonenumber:'',
                    createtime:'0',
                    orderstatus:'0'
                  })
                }}><ClearOutlined />清除条件</span>
            </div>
            <div className="search_item2">
            </div>
            <div className="search_item2">
            </div>
          

          </div>
           <div className="content"></div>
    </div>
  )
}
